<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>耶优品</title>
<link rel="stylesheet" href="<%=basePath%>static/css/computer.css">
<link rel="stylesheet"
	href="<%=basePath%>static/css/owl.carousel.min.css">
<script src="<%=basePath%>static/js/jquery.min.js"></script>
<script src="<%=basePath%>static/js/owl.carousel.js"></script>


<script rel="script" src="<%=basePath%>js/vue.min.js"></script>
<link rel="stylesheet"
	href="//at.alicdn.com/t/font_699355_5fafq7zsd2fq1tt9.css">
<link rel="stylesheet" href="<%=basePath%>css/index.css">
<script type="text/javascript" src="<%=basePath%>js/kefu.js"></script>
</head>
<body style="overflow-x: hidden">
	<!-- 顶部登录 -->
	<jsp:include page="yeah-top.jsp" />
	<!-- 顶部购物车 -->
	<jsp:include page="yeah_sellitem_shoppingtrolley.jsp" />
	
	<div class="daohang">
		<ul>
			<a href="<%=basePath%>"><li>耶首页</li></a>
			<a href="sellitemnavigation?cid=1"><li>手机</li></a>
			<a href="sellitemnavigation?cid=2"><li>台式电脑</li></a>
			<a href="sellitemnavigation?cid=3"><li>笔记本</li></a>
			<a href="sellitemnavigation?cid=4"><li>平板电脑</li></a>
			<a href="sellitemnavigation?cid=5"><li>电脑配件</li></a>
		</ul>
	</div>
	
	<!-- 轮播图 GO-->
	<div class="waper">
		<jsp:include page="yeah_slider_sellitem.jsp" />
	</div>
	<!-- 轮播图 END -->
	
	<section class="ros" style="height: 1300px">
		<div class="zhuti" style="height: 1300px">
			<div style="margin-bottom: 20px;">
				<span class="zhuti1">品牌整机推荐</span> <span style="float: right;">
					<a href="sellitemnavigation?completemachine=1">更多品牌整机推荐 ></a>
				</span>
			</div>

			<div class="large-12 columns" style="margin-bottom: 50px">
				<div class="owl-carousel owl-theme">
					<c:forEach items="${ppzj.pageinfo.list }" var="ppzj">

						<div class="item">
							<a href="sellitemparticulars?i_id=${ppzj.i_id }"> <img
								src="${ppzj.image }" style="width: 300px; height: 200px" alt="">
							</a>
							<div style="text-align: center; margin-top: 10px">${ppzj.title }</div>
							<p>￥${ppzj.lowprice }</p>
						</div>

					</c:forEach>
				</div>
				<script>
					$(document).ready(function() {
						var owl = $('.owl-carousel');
						owl.owlCarousel({
							margin : 10,
							nav : true,
							loop : true,
							responsive : {
								0 : {
									items : 1
								},
								600 : {
									items : 3
								},
								1000 : {
									items : 3
								}
							}
						})
					})
				</script>
			</div>
			<div style="margin-bottom: 20px;">
				<span class="zhuti1">游戏整机推荐</span> <span style="float: right;">
					<a href="sellitemnavigation?completemachine=2">更多游戏整机推荐 ></a>
				</span>
			</div>

			<div class="owl-carousel owl-theme" style="margin-bottom: 50px">
				<c:forEach items="${yxzj.pageinfo.list }" var="yxzj">

					<div class="item">
						<a href="sellitemparticulars?i_id=${yxzj.i_id }"> <img
							src="${yxzj.image }" style="width: 300px; height: 200px" alt="">
						</a>
						<div style="text-align: center; margin-top: 10px">${yxzj.title }</div>
						<p>￥${yxzj.lowprice }</p>
					</div>

				</c:forEach>
			</div>

			<div style="margin-bottom: 20px;">
				<span class="zhuti1">新品上架</span> <span style="float: right;">
					<a href="sellitemnavigation?completemachine=3">更多新品推荐 ></a>
				</span>
			</div>

			<div class="owl-carousel owl-theme">
				<c:forEach items="${newzj.pageinfo.list }" var="newzj">

					<div class="item">
						<a href="sellitemparticulars?i_id=${newzj.i_id }"> <img
							src="${newzj.image }" style="width: 300px; height: 200px" alt="">
						</a>
						<div style="text-align: center; margin-top: 10px">${newzj.title }</div>
						<p>￥${newzj.lowprice }</p>
					</div>

				</c:forEach>
			</div>


		</div>
		
		<!-- 底部 -->
		<jsp:include page="bottom.jsp" />
	</section>


	<script type="text/javascript">
	<!-- 搜索机型 -->
		function search() {
			var title = $("#search").val().trim();
			if (title.length == 0) {
				return false;
			}
			$("#asearch").attr("href", "sellitemnavigation?title=" + title);
			return true;
		}
	</script>

</body>
</html>